<template>
  <div class="container">
    <UserLogin v-if="NoLogin" />
    <UserModifyPassword v-else />
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

import UserLogin from './components/UserLogin.vue'
import UserModifyPassword from './components/userModifyPassword.vue'
const route = useRoute()
const NoLogin = ref(true)

onMounted(() => {
  const { username } = route.query
  if (username) {
    NoLogin.value = !NoLogin
  }
})
</script>

<style lang="less" scoped>
// @import './styles/Login.css';
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f3f3f3;
}

.user-login {
  width: 350px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  animation: slide-up 0.5s ease;
}

.user-modify-password {
  width: 350px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  animation: slide-up 0.5s ease;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #333333;
}

.form-item {
  margin-bottom: 20px;
}

.submit-button {
  width: 100%;
  margin-top: 20px;
  font-size: 16px;
  background-color: #0086ff;
  border-color: #0086ff;
  transition: all 0.3s ease;
}

.submit-button:hover {
  background-color: #0072c6;
  border-color: #0072c6;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
